<template>
    <div class="data_show_mode">
        <div class="top">
            <div class="left">
                <slot name="left"></slot>
            </div>
            <div class="right">
                <Mode_bt_list
                    v-model="show_mode">
                </Mode_bt_list>
            </div>
        </div>
        <template v-if="show_mode == 'list'">
            <List_mode_cp
                :data_type="data_type"
                :data_list="data_list"
                @sort-change="sortChange">
            </List_mode_cp>
        </template>
        <template v-else>
            <Thumb_mode_cp
                :data_type="data_type"
                :data_list="data_list"
                :only_sign="only_sign">
            </Thumb_mode_cp>
        </template>
        <div class="data_number">
            共 {{data_list.length}} 项
        </div>
    </div>
</template>

<script>
import List_mode_cp from '@/components/public_cp/list_mode'
import Thumb_mode_cp from '@/components/public_cp/thumb_mode'
import Mode_bt_list from '@/components/public_bt/mode_bt_list'
export default {  //数据的展示模式（展示数据用）
    name: 'data_show_mode',
    components:{List_mode_cp,Thumb_mode_cp,Mode_bt_list},
    props:{
        data_type:{ //数据的类型，默认为普通，可以为share(分享的数据)
            type:String,
            default:'',
        },
        data_list:{ //数据
            type:Array,
            default:()=>{
                return [];
            },
        },
        only_sign:{ //用来确定那个属性是唯一标识
            type:String,
            default:'fileName',
        },
    },
    data(){
        return{
            show_mode:"list", //文件显示模式（列表模式展示和缩略图模式展示）
        };
    },
    watch:{
        show_mode(){ //当选项发生变化时清空已选择的文件(缓存当前选择的模式)
            this.$store.commit('remove_selection_files');
            localStorage.setItem('data_show_mode',this.show_mode);
            this.$emit('change_show_mode',this.show_mode); //当选项发生变化时，通知数据源更新，防止排序错乱
        },
        
    },
    created(){
        //初始化该视图显示模式
        this.show_mode = localStorage.getItem('data_show_mode') || 'list'; //默认为list展示
    },
    methods:{
        sortChange(order){ //排序回调方法
            this.$emit("sort-change",order);
        },
    },
}
</script>

<style scoped lang='scss'>
.data_show_mode{
    width: 100%;
    box-sizing: border-box;
    >.top{
        height: 65px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: black;
        font-size: 15px;
        font-weight: bold;
        >.left{
            line-height: 100%;
        }
        >.right{
            i{
                margin-left: 20px;
                font-size: 25px;
                color: #687176;
                cursor: pointer;
            }
            >.on_mode{
                color: #2980ff;
                border: 2px solid #2b2e4a;
                border-radius: 5px;
            }
        }
    }
    >.data_number{
        width: 100%;
        text-align: center;
        margin: 20px 0;
        font-size: 13px;
        color: #777;
    }
}
</style>
